<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="./jquery"></script>-->
    <style>

    </style>
</head>
<body>
<div class="center" style="display: flex; justify-content: space-around;">
<table style=" margin: 20px 0;">
    <tr>
        <td>名字:</td>
        <td>
            <input type="text" id="name">
        </td>
    </tr>
    <tr>
        <td>密码:</td>
        <td>
            <input type="text" id="regist_pwd">
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <button type="button" id="regist_btn" style="display:block;width: 80%;margin: auto; background: #333333;color:white;height: 30px;border: none; outline: none;border-radius: 10px">
                注册
            </button>
        </td>
    </tr>

</table>
<table style=" margin: 20px 0;">
    <tr>
        <td>名字:</td>
        <td>
            <input type="text" id="name2">
        </td>
    </tr>
    <tr>
        <td>密码:</td>
        <td>
            <input type="text" id="regist_pwd2">
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <button type="button" id="login_btn" style="display:block;width: 80%;margin: auto; background: #333333;color:white;height: 30px;border: none; outline: none;border-radius: 10px">
                登录
            </button>
        </td>
    </tr>

</table>
</div>
<div>
    <button onclick="getUserInfo(this)">获取用户信息</button>
    <div>

    </div>
</div>
</body>
<script src="jquery/dist/jquery.js"></script>
<script>
    $(function () {
        //入口函数，通常使用跟window.onload是一样的功效，区别：
    //    在JQUERY文件加载之后，同时当前的window下面已经有了$和jquery对象之后，才去运行
        $('#regist_btn').on('click',function () {
            regist()
        })
        $('#login_btn').on('click',function () {
            login()
        })



        //注册函数
        function regist() {
            future.ajax({
                url:'/users/regist',
                type:'post',
                data:{
                    name:$('#name').val(),
                    pwd:$('#regist_pwd').val()
                },
                success:function (res) {
                    alert(res)
                }
            })
        }
        //登录函数
        function login() {
            future.ajax({
                url:'/users/login',
                type:'get',
                data:{
                    name:$('#name2').val(),
                    pwd:$('#regist_pwd2').val()
                },
                success:function (res) {
                    alert(res)
                }
            })
        }


    })
    function getUserInfo(obj) {
        future.ajax({
            url:'/users/getUserInfo',
            type:'get',
            success:function (res) {
                $(obj).siblings('div').text(JSON.stringify(res))
            }
        })
    }
    //    封装概念
    //    工具类容器
    var future={}
    future.baseurl='http://localhost:3000'
    future.ajax=function (options) {
        $.ajax({
            // beforeSend:function(req){
            //     if(window.localstorage.token)
            //     req.setRequestHeader('token',window.localstorage.token)
            // },
            url:future.baseurl+options.url,
            type:options.type ||'post',
            async:options.async|| false,
            data:options.data,
            success:function (res) {
                if(options.success){
                    options.success(res)
                }
            },
            error:function (error) {
                if(options.error){
                    options.error(error)
                }
                else{
                    alert(error.responseText)
                }
            }
        })
    }

    /**
     * 设置cookie
     */
    function setCookie(name, value, seconds) {
        seconds = seconds || 0;  //conds有值就直接赋值，没有为0，这个根php不一样。
        var expires = "";
        // cookies随浏览器关闭而失效的方法:
        //     如果不设置Expires的属性那么Cookie的存活时间就是在关闭浏览器的时候。
        if (seconds != 0 ) {      //设置cookie生存时间
            var date = new Date();
            date.setTime(date.getTime()+(seconds*1000));
            expires = "; expires="+date.toGMTString();
        }
        document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
    }

    /**
     * 读取cookie
     */
    function getCookie(name) {
        var nameEQ = name + '='
        var ca = document.cookie.split(';') // 把cookie分割成组
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i] // 取得字符串
            while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
                c = c.substring(1, c.length) // 有的话，从第二位开始取
            }
            if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
                return unescape(c.substring(nameEQ.length, c.length)) // 解码并截取我们要值
            }
        }
        return false
    }

    /**
     * 检查cookie
     * @param c_name
     * @return {boolean}
     */
    function checkCookie(c_name) {
        username = getCookie(c_name);
        console.log(username);
        if (username != null && username != "") {
            return true;
        }
        else {
            return false;
        }
    }

    /**
     * 清除cookie
     * @param name
     */
    function clearCookie(name) {
        setCookie(name, "", -1);
    }


</script>
</html>